<template>
  <div class="page-container">
    <!-- 面包屑部分 -->
    <div class="breadcrumb">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item>营销中心</el-breadcrumb-item>
        <el-breadcrumb-item>叠加活动管理</el-breadcrumb-item>
        <el-breadcrumb-item>叠加活动列表</el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <div class="toolbar">
      <el-form :inline="true" ref="formData" :model="formData">
        <el-row class="search-input">
          <el-form-item label="ID：">
            <el-input v-model="formData.overlayId" clearable></el-input>
          </el-form-item>
          <el-form-item label="活动名称：">
            <el-input v-model="formData.overlayName" clearable></el-input>
          </el-form-item>
        </el-row>
        <el-row class="search-button">
          <el-button type="primary" @click="search" icon="el-icon-search">搜索</el-button>
          <el-button type="primary" @click="add">添加</el-button>
        </el-row>
      </el-form>
    </div>
    <div class="tab-container">
      <el-tabs type="border-card" @tab-click="handleClick" v-model="activeName">
        <el-tab-pane
          v-for="(item,index) in formData.options"
          :key="index"
          :label="item.label"
          :name="item.value"
        ></el-tab-pane>
      </el-tabs>
    </div>
    <el-table :data="tableData" border>
      <el-table-column label="ID" prop="overlayId"></el-table-column>
      <el-table-column label="叠加名称" prop="overlayName"></el-table-column>
      <el-table-column label="状态" prop="statusName"></el-table-column>
      <el-table-column label="创建人" prop="creatorName"></el-table-column>
      <el-table-column label="创建时间" prop="createTime"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button type="text" @click="handleEdit(scope.$index, scope.row)" class="btnText">编辑</el-button>
          <el-button
            v-if="scope.row.status != 2"
            type="text"
            @click="handleClose(scope.$index, scope.row)"
            class="btnText"
          >关闭</el-button>
          <el-button type="text" @click="handleDelete(scope.$index, scope.row)" class="btnText">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <div v-if="tableData.length>0" class="t_r">
      <el-pagination
        class="pagination"
        @current-change="handleCurrentChange"
        :current-page="start"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </div>
  </div>
</template>
<script>
export default {
  components: {},
  data() {
    return {
      formData: {
        //查询条件
        status: "",
        options: [
          {
            label: "初始化",
            value: "0"
          },
          {
            label: "已开启",
            value: "1"
          },
          {
            label: "已关闭",
            value: "2"
          }
        ]
      },
      //数据列表
      tableData: [],
      //编辑弹框
      limit: 10,
      start: 1,
      total: 0
    };
  },
  methods: {
    //初始数据
    init(num) {
      let sendData = {
        start: this.start,
        limit: this.limit,
        overlayName: this.formData.overlayName
          ? this.formData.overlayName
          : null,
        overlayId: this.formData.overlayId ? this.formData.overlayId : null
      };
      if (num) {
        sendData.status = num;
      }

      this.utils.request.queryOverlayInfoPage(sendData, res => {
        if (res.code == "0000" && res.data && res.data.rows) {
          res.data.rows.forEach(f => {
            if (f.status == 0) {
              f.statusName = "初始化";
            } else if (f.status == 1) {
              f.statusName = "开启";
            } else {
              f.statusName = "关闭";
            }
          });
          this.tableData = res.data.rows;
          this.total = res.data.total;
        } else {
          this.$message({
            message: "操作失败, " + res.msg,
            type: "error"
          });
        }
      });
    },
    // 显示编辑页面
    handleEdit: function(index, row) {
      this.$router.push({
        path: "/OverlayPromotion/add",
        query: { overlayId: row.overlayId }
      });
    },
    handleClose(index, row) {
      this.$confirm("确认关闭吗？", "提示", {}).then(() => {
        var params = {
          overlayId: row.overlayId
        };
        var that = this;
        this.utils.request.closeOverlay(params, function(res) {
          if (res.code == "0000") {
            that.$message({ message: "操作成功", type: "success" });
            that.init();
          } else {
            that.$message({
              message: "操作失败, " + res.msg,
              type: "error"
            });
          }
        });
      });
    },
    // 删除
    handleDelete: function(index, row) {
      this.$confirm("确认删除吗？", "提示", {}).then(() => {
        var params = {
          overlayId: row.overlayId
        };
        var that = this;
        this.utils.request.deleteOverlay(params, function(res) {
          if (res.code == "0000") {
            that.$message({ message: "操作成功", type: "success" });
            that.init();
          } else {
            that.$message({
              message: "操作失败, " + res.msg,
              type: "error"
            });
          }
        });
      });
    },
    //跳转到添加叠加管理
    add() {
      this.$router.push("/OverlayPromotion/add");
    },
    //currentPage 改变时会触发
    handleCurrentChange(val) {
      this.start = val;
      this.init();
      console.log(`当前页: ${val}`);
    },
    search() {
      this.init();
    },
    handleClick(tab, event) {
      this.init(tab.index);
    }
  },
  mounted() {
    this.init();
  }
};
</script>
<style scoped lang="scss">
  @import '../../../../assets/css/public.scss';
</style>
